<template>
	<view class="setpwd">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">支付密码</block>
		</cu-custom>		
		<view class="padding bg-white">
			<view class="padding-bottom-sm">
				<view class="cu-steps">
					<view class="cu-item" :class="index > step ? '' : 'text-red'" v-for="(item,index) in steps" :key="index">
						<text class="num" :class="index== err ? 'err' : ''" :data-index="index + 1"></text> {{item.name}}
					</view>
				</view>
			</view>
			<view class='password-input' @tap="show = !show">
				<view v-for="(i, idx) in 6" :key="idx"><view :class="{ act: idx < state.length }"></view></view>
			</view>				
		</view>
		<key-board :show="show" @on-close="show = !show" @on-key="reset" @on-del="del"></key-board>
	</view>
</template>

<script>
	import KeyBoard from '@/components/keyboard'
	import { mapGetters } from 'vuex'
	import { payPass } from '@/common/api/users'
	export default {
		name:'setpwd',
		data () {
			return {
				show: true,
				step: 0,
				err: -1,
				pwd: '',
				password: '',
				compwd: ''			
			}
		},
		computed: {
			...mapGetters([
				'userInfo',
				'shop'
			]),
			state () {
				if (this.userInfo.pay_pwd) {
					if (!this.step) return this.pwd
					if (this.step === 1) return this.password
					return this.compwd					
				}
				if (!this.step) return this.password
				return this.compwd
			},
			steps () {
				if (this.userInfo.pay_pwd) return [ { step: 1, name: '原始密码' }, { step: 2, name: '新密码' }, { step: 3, name: '验证密码' } ]
				return [ { step: 1, name: '新密码' }, { step: 2, name: '验证密码' } ]
			}
		},
		methods: {
			reset (key) {
				if (this.userInfo.pay_pwd) {
					switch (this.step) {
						case 0:
						if (this.pwd.length !== 6) this.pwd += key
						break;
						case 1:
						if (this.password.length !== 6) this.password += key
						break;
						case 2:
						if (this.compwd.length !== 6) this.compwd += key
						break;					
					}					
				} else {
					switch (this.step) {
						case 0:
						if (this.password.length !== 6) this.password += key
						break;
						case 1:
						if (this.compwd.length !== 6) this.compwd += key
						break;					
					}					
				}
			},
			del () {
				if (this.userInfo.pay_pwd) {
					switch(this.step) {
						case 0:
						if (this.pwd) this.pwd = this.pwd.substr(0, this.pwd.length - 1)
						break;
						case 1:
						if (this.password) this.password = this.password.substr(0, this.password.length - 1)
						break;
						case 2:
						if (this.compwd) this.compwd = this.compwd.substr(0, this.compwd.length - 1)
						break;					
					}					
				} else {
					switch(this.step) {
						case 0:
						if (this.password) this.password = this.password.substr(0, this.password.length - 1)
						break;
						case 1:
						if (this.compwd) this.compwd = this.compwd.substr(0, this.compwd.length - 1)
						break;					
					}					
				}
			}
		},
		watch: {
			pwd (val, oldval) {
				if (val.length === 6) {
					if (val === this.userInfo.pay_pwd) {
						this.step = 1
						this.err = -1
					} else {
						this.pwd = ''
						this.err = this.step
						uni.showToast({ title: '密码错误', icon: 'none' })
					}					
				}
			},
			password (val, oldval) {
				if (this.userInfo.pay_pwd) {
					if (val.length === 6) this.step = 2
				} else {
					if (val.length === 6) this.step = 1
				}
			},
			compwd (val, oldval) {
				if (val.length === 6) {
					if (val === this.password) {
						uni.showLoading({ mask: true })
						payPass({ customer_id: this.shop.customer_id, user_id: this.userInfo.id, ticket: this.userInfo.ticket , password: this.password }).then(res => {
							uni.hideLoading()
							if (!res.code || !this.userInfo.pay_pwd) {
								this.$store.commit('SET_PAYPWD', this.password)
								uni.setStorageSync('userInfo', this.userInfo)
								this.step = 0
								this.err = -1
								this.pwd = this.password = this.compwd = ''
								uni.showToast({
									title: '设置成功'
								})								
							}
						})						
					} else {
						this.err = this.step
						uni.showToast({
							title: '验证密码错误', 
							icon: 'none'
						})
					}
				}
			}
		},
		components: { KeyBoard }
	}
</script>

<style lang="less" scoped>
.setpwd {	
	.password-input {
		display: flex;
		border: 1px solid #ddd;
		background-color: #fff;
		border-radius: 3px;
		transform: scale(.8);
		border-radius: 20upx;
		overflow: hidden;
		box-shadow:0px 0px 8px #e4e4e4;
		margin: 0 15upx;
		view {
			flex: 1;
			border-right: 1px solid #f3f3f3;
			position: relative;
			& > view {
				width: 100%;
				padding-top: 100%;
				&.act {
					&::after {
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						content: '\2022';
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						font-size: 52upx;
					}
				}
			}
			&:nth-child(6) {
				border: none;
			}
		}
	}
}	
</style>